<!DOCTYPE html>
<html lang="en">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
      name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>大区意向客户列表new</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/dist/css/oa-app.css">
<head>

</head>
<style>
    .lineOne, .lineTwo {
        text-align: left;
    }
    .lineOne span {
        max-height: 24px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-align: left;
    }
    .div-td-content-more {
        position: absolute;
        height: auto;
        z-index: 999;
        line-height: 20px;
        background-color: #d3e8fd;
        padding: 8px 6px;
        border: 1px solid #e8e8ea;
        display: none;
    }
    .div-td-content-more i {
        width: 15px;
        height: 12px;
        /* background: url("/dist/img/more-icon.png");*/
        position: absolute;
        left: 50px;
        top: -12px;
    }
    .hidden {
        display: none;
    }
    .model-picker-dropdown {
        position: absolute;
        width: 315px;
        left: -9999px;
        top: -9999px;
        outline: 0;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        z-index: 999999;
        display: none;
        min-width: 200px;
        margin-bottom: 20px;
        margin-top: 5px
    }

    .model-select-wrap {
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5)
    }

    .model-select-tab {
        border-bottom: 1px solid #ccc;
        background: #f5f5f5;
        font-size: 13px
    }

    .model-select-tab > a {
        display: inline-block;
        padding: 4px 20px;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid transparent;
        color: #4D4D4D;
        text-align: center;
        outline: 0;
        text-decoration: none;
        cursor: pointer;
        font-size: 14px;
        margin-bottom: -1px
    }

    .model-select-tab > a.active {
        background: #fff;
        border-bottom: 1px solid #fff;
        color: #46A4FF
    }

    .model-select-tab > a:first-child {
        border-left: none
    }

    .model-select-tab > a:last-child.active {
        border-right: 1px solid #ccc
    }

    .model-select-content {
        width: 100%;
        min-height: 50px;
        background-color: #fff;
        padding: 5px 5px
    }

    .model-select {
        font-size: 12px
    }

    .model-select dl {
        line-height: 2;
        clear: both;
        padding: 3px 0;
        margin: 0;
        max-height: 200px;
        overflow-y: scroll
    }

    .model-select dt {
        position: absolute;
        width: 2.5em;
        font-weight: 500;
        text-align: right;
        line-height: 2
    }

    .model-select dd {
        margin-left: 0;
        line-height: 2
    }

    .model-select.province dd {
        margin-left: 3em
    }

    .model-select a {
        display: inline-block;
        padding: 0 10px;
        outline: 0;
        white-space: nowrap;
        margin-right: 2px;
        text-decoration: none;
        color: #333;
        cursor: pointer
    }

    .model-select a:hover, .model-select a:focus {
        background-color: #f1f8ff;
        border-radius: 2px;
        color: #46A4FF
    }

    .model-select a.active {
        background-color: #46A4FF;
        color: #fff;
        border-radius: 2px
    }
    .div-td-content-more {
          position: absolute;
          height: auto;
          z-index: 999;
          line-height: 20px;
          background-color: #d3e8fd;
          padding: 8px 6px;
          border: 1px solid #e8e8ea;
          display: none;
      }

    .div-td-content-more i {
        width: 15px;
        height: 12px;
        background: url("/dist/img/more-icon.png");
        position: absolute;
        left: 50px;
        top: -12px;
    }
</style>
<body>
<div id="app" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <!--销售目标-->
    <table class="oa-table ">
        <thead>
        <tr class="oa-table-title">
            <th>2019年销售目标</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table " >
        <thead>
        <tr class="oa-table-title-gray">
            <td  style="width: 20%;border-top: none">姓名</td>
            <td  style="width: 20%;border-top: none">年度目标</td>
            <td  style="width: 10%;border-top: none">完成</td>
            <td  style="width: 20%;border-top: none">本月目标</td>
            <td  style="width: 10%;border-top: none">完成</td>
            <td  style="width: 20%;border-top: none">完成概率</td>
        </tr>
        </thead>

    </table>
    <table class="oa-table">
        <tbody>
        <tr >
            <td style="width: 20%;border-top: none">
                {{user.name}}
            </td>
            <td style="width: 20%;border-top: none">{{bigData.targetNum}}</td>
            <td style="width: 10%;border-top: none">{{bigData.finishNum}}</td>
            <td style="width: 20%;border-top: none">{{bigData.monthTargetNum}}</td>
            <td style="width: 10%;border-top: none">{{bigData.monthFinishNum}}</td>
            <td style="width: 20%;border-top: none">{{bigData.finishNum?Math.round(bigData.finishNum/ bigData.targetNum * 10000) /
                100.00+"%":"0%"}}
            </td>
        </tr>
        <tr v-for="(item,i) in listTarget">
            <td style="border-top: none">
                <div class="oa-name">{{item.regionManagerName}}</div>
            </td>
            <td style="border-top: none">{{item.targetNum}}</td>
            <td style="border-top: none">{{item.finishSum}}</td>
            <td style="border-top: none">{{getMonthData(item,'target')}}</td>
            <td style="border-top: none">{{getMonthData(item,'finish')}}</td>
            <td style="border-top: none">{{item.finishSum?Math.round(item.finishSum/ item.targetNum * 10000) /
                100.00+"%":"0%"}}
            </td>
        </tr>
        </tbody>
    </table>
    <!--本月内-->
    <table style="margin-top:10px" class="oa-table ">
        <thead>
        <tr class="oa-table-title">
            <th>本月内</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table " >
        <thead>
        <tr class="oa-table-title-gray">
            <td  style="width: 20%;border-top: none">区域经理</td>
            <td  style="width: 20%;border-top: none">客户</td>
            <td  style="width: 20%;border-top: none">品牌</td>
            <td  style="width: 20%;border-top: none">机型</td>
            <td  style="width: 20%;border-top: none">成交概率</td>
        </tr>
        </thead>
    </table>
    <table class="oa-table">
        <tbody>
        <tr v-for="(item,i) in list1">
            <td :rowspan="item.genZRspan" :class="{hidden:item.genZRdis}" style="width: 20%;border-top: none">
                <div class="oa-name" >{{item.genZR}}</div>
            </td>
            <td style="color: #2a8cec;overflow:hidden;text-overflow:ellipsis;width: 20%;border-top: none"
                @click="openDetail(item.customerId,0,'look')"
                v-if="item.customerName" >
                <div class="oa-name">{{item.customerName}}</div>
            </td>
            <td v-else style="width: 20%;border-top: none"></td>
            <td style="width: 20%;border-top: none">{{item.intentionBrand}}</td>
            <td class="lineOne" style="width: 20%;border-top: none"><span>{{item.intentionModel}}</span></td>
            <td style="width: 20%;border-top: none">{{item.chance}}</td>
        </tr>
        <tr v-if="!list1 ||list1.length<=0">
            <td colspan="5" style="margin: 0 auto;color: #999999;text-align: center;padding: 32px;font-size: 16px;background: #fff;border-top: none">
                暂无意向客户
            </td>
        </tr>
        </tbody>
    </table>

    <!--下月内-->
    <table style="margin-top:10px" class="oa-table ">
        <thead>
        <tr class="oa-table-title">
            <th>下月内</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table " >
        <thead>
        <tr class="oa-table-title-gray">
            <td  style="width: 20%;border-top: none">区域经理</td>
            <td  style="width: 20%;border-top: none">客户</td>
            <td  style="width: 20%;border-top: none">品牌</td>
            <td  style="width: 20%;border-top: none">机型</td>
            <td  style="width: 20%;border-top: none">成交概率</td>
        </tr>
        </thead>
    </table>
    <table class="oa-table">
        <tbody>
        <tr v-for="(item,i) in list2">
            <td :rowspan="item.genZRspan" :class="{hidden:item.genZRdis}" style="width: 20%;border-top: none">
                <div class="oa-name" >{{item.genZR}}</div>
            </td>
            <td style="color: #2a8cec;overflow:hidden;text-overflow:ellipsis;width: 20%;border-top: none"
                @click="openDetail(item.customerId,0,'look')"
                v-if="item.customerName" >
                <div class="oa-name">{{item.customerName}}</div>
            </td>
            <td v-else style="width: 20%;border-top: none"></td>
            <td style="width: 20%;border-top: none">{{item.intentionBrand}}</td>
            <td class="lineOne" style="width: 20%;border-top: none"><span>{{item.intentionModel}}</span></td>
            <td style="width: 20%;border-top: none">{{item.chance}}</td>
        </tr>
        <tr v-if="!list2 ||list2.length<=0">
            <td colspan="5" style="margin: 0 auto;color: #999999;text-align: center;padding: 32px;font-size: 16px;background: #fff;border-top: none" >
                暂无意向客户
            </td>
        </tr>
        </tbody>
    </table>
    <!--三月内-->
    <table style="margin-top:10px" class="oa-table ">
        <thead>
        <tr class="oa-table-title">
            <th>三月内</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table " >
        <thead>
        <tr class="oa-table-title-gray">
            <td  style="width: 20%;border-top: none">区域经理</td>
            <td  style="width: 20%;border-top: none">客户</td>
            <td  style="width: 20%;border-top: none">品牌</td>
            <td  style="width: 20%;border-top: none">机型</td>
            <td  style="width: 20%;border-top: none">成交概率</td>
        </tr>
        </thead>
    </table>
    <table class="oa-table">
        <tbody>
        <tr v-for="(item,i) in list3">
            <td :rowspan="item.genZRspan" :class="{hidden:item.genZRdis}" style="width: 20%;border-top: none">
                <div class="oa-name" >{{item.genZR}}</div>
            </td>
            <td style="color: #2a8cec;overflow:hidden;text-overflow:ellipsis;width: 20%;border-top: none"
                @click="openDetail(item.customerId,0,'look')"
                v-if="item.customerName" >
                <div class="oa-name">{{item.customerName}}</div>
            </td>
            <td v-else style="width: 20%;border-top: none"></td>
            <td style="width: 20%;border-top: none">{{item.intentionBrand}}</td>
            <td class="lineOne" style="width: 20%;border-top: none"><span>{{item.intentionModel}}</span></td>
            <td style="width: 20%;border-top: none">{{item.chance}}</td>
        </tr>
        <tr v-if="!list3 ||list3.length<=0">
            <td colspan="5" style="margin: 0 auto;color: #999999;text-align: center;padding: 32px;font-size: 16px;background: #fff;border-top: none" >
                暂无意向客户
            </td>
        </tr>
        </tbody>
    </table>
    <!--半年内-->
    <table style="margin-top:10px" class="oa-table ">
        <thead>
        <tr class="oa-table-title">
            <th>半年内</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table " >
        <thead>
        <tr class="oa-table-title-gray">
            <td  style="width: 20%;border-top: none">区域经理</td>
            <td  style="width: 20%;border-top: none">客户</td>
            <td  style="width: 20%;border-top: none">品牌</td>
            <td  style="width: 20%;border-top: none">机型</td>
            <td  style="width: 20%;border-top: none">成交概率</td>
        </tr>
        </thead>
    </table>
    <table class="oa-table" style="margin-bottom: 60px">
        <tbody>
        <tr v-for="(item,i) in list4">
            <td :rowspan="item.genZRspan" :class="{hidden:item.genZRdis}" style="width: 20%;border-top: none">
                <div class="oa-name" >{{item.genZR}}</div>
            </td>
            <td style="color: #2a8cec;overflow:hidden;text-overflow:ellipsis;width: 20%;border-top: none"
                @click="openDetail(item.customerId,0,'look')"
                v-if="item.customerName" >
                <div class="oa-name">{{item.customerName}}</div>
            </td>
            <td v-else style="width: 20%;border-top: none"></td>
            <td style="width: 20%;border-top: none">{{item.intentionBrand}}</td>
            <td class="lineOne" style="width: 20%;border-top: none"><span>{{item.intentionModel}}</span></td>
            <td style="width: 20%;border-top: none">{{item.chance}}</td>
        </tr>
        <tr v-if="!list4 ||list4.length<=0">
            <td colspan="5" style="margin: 0 auto;color: #999999;text-align: center;padding: 32px;font-size: 16px;background: #fff;border-top: none">
                暂无意向客户
            </td>
        </tr>
        </tbody>
    </table>
    <div class="oa-footer-btn" style="" @click="openDetail('',1,'edit')">新增意向客户</div>


</div>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/js/newOaApp.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script>
    //navigateBack回调
    function onParamReceived(param) {
        if (param) {
            app.showLoading()
            app.get_customerList_regionManager();
            app.getTarget();
            app.hideLoading()
        }
    }

</script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            userId: getUrlParamObj().userId,
            userName: getUrlParamObj().userName,
            companyId: getUrlParamObj().companyId,
            dateTime: "2019",
            currentMonth: new Date().Format("M"),
            key: '',
            buyDateList: "'','七天内','一月内'",
            customerList: [],
            returnFlag: false,
            listMonth: [],
            daQuObj: {},
            listYear: [],
            listTarget: [],
            list1: [],
            list2: [],
            list3: [],
            list4: [],
            listLost: [],
            listDone: [],
            isSelf: getUrlParamObj().isSelf,
            beginMonth: '',
            middleMonth: '',
            endMonth: '',
            user: {},
            bigData: {
                "targetNum": "",
                "finishNum": "",
                "monthTargetNum": "",
                "monthFinishNum": "",
                "gl": ""
            }
        },
        methods: {
            //获取合计
            getCount: function (arr, key) {
                var number = 0;
                for (var i = arr.length - 1; i >= 0; i--) {
                    number += (arr[i][key] && arr[i][key] != '-' ? arr[i][key] : 0)

                }
                return number;
            },
            // 电话号码中间用*代替
            telNumber: function (telNum) {
                var firstTelNum = telNum.substring(0, 3);
                var lastTelNum = telNum.substring(telNum.length - 4, telNum.length);
                return firstTelNum + "****" + lastTelNum;
            },
            getMonthData: function (item, type) {
                var str = '';
                switch (this.currentMonth) {
                    case "1":
                        //alert(report.dateReissueEnd)
                        str = 'jan'
                        break;
                    case "2":
                        str = 'feb'
                        break;
                    case "3":
                        str = 'mar'
                        break;
                    case "4":
                        str = 'apr'
                        break;
                    case "5":
                        str = 'may'
                        break;
                    case "6":
                        str = 'june'
                        break;
                    case "7":
                        str = 'july'
                        break;
                    case "8":
                        str = 'aug'
                        break;
                    case "9":
                        str = 'sept'
                        break;
                    case "10":
                        str = 'oct'
                        break;
                    case "11":
                        str = 'nov'
                        break;
                    case "12":
                        str = 'dece'
                        break;
                    default:
                        break;
                }
                if (type == 'finish') {
                    str += "Finish"
                }
                console.log(str);
                console.log(item[str]);
                return item[str];
            },
            //合并单元格
            tablesMergeCell: function (list) {
                for (field in list[0]) {
                    var k = 0;
                    while (k < list.length) {
                        list[k][field + 'span'] = 1;
                        list[k][field + 'dis'] = false;
                        for (var i = k + 1; i <= list.length - 1; i++) {
                            if (list[k][field] == list[i][field] && list[k][field] != '') {
                                list[k][field + 'span']++;
                                list[k][field + 'dis'] = false;
                                list[i][field + 'span'] = 1;
                                list[i][field + 'dis'] = true;
                            } else {
                                break;
                            }
                        }
                        k = i;
                    }
                }
                return list;
            },
            //本月目标、本年目标
            getTarget: function () {
                var that = this;
                axios.post('/depConfig/getRegionSaleTarget.json', {
                    "userId": that.userId,
                    "companyId": that.companyId,
                    "dateTime": that.dateTime
                })
                    .then(function (data) {
                        console.log(data)
                        that.listTarget = data.info;
                        that.bigData.targetNum = that.getCount(data.info, 'targetNum')
                        that.bigData.finishNum = that.getCount(data.info, 'finishNum')
                        var str = '';
                        switch (that.currentMonth) {
                            case "1":
                                //alert(report.dateReissueEnd)
                                str = 'jan'
                                break;
                            case "2":
                                str = 'feb'
                                break;
                            case "3":
                                str = 'mar'
                                break;
                            case "4":
                                str = 'apr'
                                break;
                            case "5":
                                str = 'may'
                                break;
                            case "6":
                                str = 'june'
                                break;
                            case "7":
                                str = 'july'
                                break;
                            case "8":
                                str = 'aug'
                                break;
                            case "9":
                                str = 'sept'
                                break;
                            case "10":
                                str = 'oct'
                                break;
                            case "11":
                                str = 'nov'
                                break;
                            case "12":
                                str = 'dece'
                                break;
                            default:
                                break;
                        }
                        that.bigData.monthTargetNum = that.getCount(data.info, str)
                        that.bigData.monthFinishNum = that.getCount(data.info, str + "Finish")
                    })
            },
            //获取七天内等
            get_customerList_regionManager: function () {
                var that = this;
                /*that.showLoading()*/
                    that.list1= [],
                    that.list2= [],
                    that.list3= [],
                    that.list4= [],
                axios.post(urlConfig.intentionCustomerManagement.getIntentCustomerListForBigRegion, {
                    "userId": that.userId,
                    "buyDate": that.buyDate,
                    "key": that.key
                })
                    .then(function (data) {
                        console.log(data.records)
                        for (var i = 0; i < data.records.length; i++) {
                            var item = data.records[i]
                            if (item && item.customerTel) {
                                item.customerTel = item.customerTel.replace(/\s+/g, "");
                                if (that.isSelf != '1') {
                                    item.customerTel = that.telNumber(item.customerTel);
                                }
                            }
                            if (item.createUserId) {
                                that.currentCreateUserId = item.createUserId
                            }
                            switch (item.buyDate) {
                                case '本月内':
                                    that.list1.push(item)
                                    break
                                case '下月内':
                                    that.list2.push(item)
                                    break
                                case '三月内':
                                    that.list3.push(item)
                                    break
                                case '已成交':
                                    that.listDone.push(item)
                                    break
//                            case '丢单':
//                                that.listLost.push(item)
//                                break
                                case '半年内':
                                    that.list4.push(item)
                                    break
                            }
                        }
                        that.tablesMergeCell(that.list1);
                        that.tablesMergeCell(that.list2);
                        that.tablesMergeCell(that.list3);
                        that.tablesMergeCell(that.list4);
                        that.tablesMergeCell(that.listDone);
                        if (that.list1.length > 0 && that.list1.length < 3) {
                            for (var i = 0; i <= 3 - that.list1.length; i++) {
                                that.list1.push({})
                            }
                        }
                        if (that.list2.length > 0 && that.list2.length < 3) {
                            for (var i = 0; i <= 3 - that.list2.length; i++) {
                                that.list2.push({})
                            }
                        }
                        if (that.list3.length > 0 && that.list3.length < 3) {
                            for (var i = 0; i <= 3 - that.list3.length; i++) {
                                that.list3.push({})
                            }
                        }
                        if (that.list4.length > 0 && that.list4.length < 3) {
                            for (var i = 0; i <= 3 - that.list4.length; i++) {
                                that.list4.push({})
                            }
                        }
                        // that.customerList = data.records;
                        //不足3个补充
                        that.fill3Empty(that.list1)
                        that.fill3Empty(that.list2)
                        that.fill3Empty(that.list3)
                        that.fill3Empty(that.list4)
                        that.fill3Empty(that.listDone)
                        /*that.hideLoading()*/
                    })

            },
            //打开客户详情
            openDetail: function (customerId, isAdd, pageType) {
                var isRegion = ''
                if (this.isSelf == 1) {
                    pageType = "edit"
                    isRegion = 1
                }
                var that = this;
                var param = {
                    url:'/page/intentionManagement/quYuIntentionalDetailApp.html?customerId=' + customerId + '&isAdd=' + isAdd + '&pageType=' + pageType + '&userId=' + that.userId + '&companyId=' + that.companyId + '&isRegion=' + isRegion + '&isSelf=' + that.isSelf+"&newPager=1",
                    name: '意向客户详情',
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            },
            fill3Empty: function (list) {
                if (list && list.length > 0 && list.length < 3) {
                    for (var i = 0; i <= 3 - list.length; i++) {
                        list.push({})
                    }
                }
            },
            //获取合计
            getCount: function (arr, key) {
                var number = 0;
                for (var i = arr.length - 1; i >= 0; i--) {
                    number += (arr[i][key] && arr[i][key] != '-' ? arr[i][key] : 0)

                }
                return number;
            },
            setPullRefresh: function(isOpen) {
                var param = {
                    pullRefresh: isOpen, //是否开启原生下拉刷新
                }
                JSBridge.call(UI, 'setPullRefresh', param)
            },
            showLoading: function () {
                var that = this
                var param = {
                    cancelable: false
                }
                JSBridge.call(UI, 'showLoading', param)


            },
            hideLoading: function () {
                JSBridge.call(UI, 'hideLoading')
            }
        },
        mounted: function () {
            var that = this;
            axios.post(urlConfig.system.user.getUserViewById, {
                "id": that.userId
            })
                .then(function (data) {
                    console.log(data)
                    that.user = data;
                    if (!that.companyId) {
                        that.companyId = that.user.companyId
                    }
                    console.log('companyId=' + that.companyId)
                })
            that.setPullRefresh(true);
            if(true){
                that.showLoading()
                that.getTarget();
                that.get_customerList_regionManager();
                setTimeout(function () {
                    that.hideLoading()
                },1500)

            }

        }
    })
</script>
<script>
    var isTop = true
    $(window).scroll(function () {
        //为了保证兼容性，这里取两个值，哪个有值取哪一个,scrollTop就是触发滚轮事件时滚轮的高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop === 0) {
            isTop = true
            setScrollTop(true) //到达顶部
        } else if (scrollTop > 0 && isTop) {
            isTop = false
            setScrollTop(false) //非顶部
        }
    })
    function setScrollTop (isScrollTop) {
        var param = {
            isScrollTop: isScrollTop
        }
        JSBridge.call(UI, 'setScrollTop', param)
    }

</script>
</body>
</html>